<template>
  <div class="v-classify-wrap">
    <div class="_table-body g-relative">
      <div
        class="g-flex _table-row g-ov-hidden"
        :class="{ '_current-row': 0 === currentKey }"
        @click="handleCilckRow"
      >
        <div class="_table-body-icon">
          <img src="statics/icons/app/arrowchoose.svg" />
        </div>
        <div
          class="g-flex-0 _cell _name-column g-one-line"
          :style="{ width: 110 + 'px' }"
        >
          视图分类名称
        </div>

        <div class="g-flex-1 _cell _value-column">
          <el-input
            ref="inputFocus"
            v-model="diagramClassifyModel.classifier.cnName"
            :disabled="diagramClassifyModel.isModelDisabled"
            maxlength="200"
            :show-word-limit="true"
            @change="changeInput"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { DiagramCustomizationManagementModel } from "../DiagramCustomizationManagementModel";
import { DiagramClassifyModel } from "./classifyConfigurationComps/DiagramClassifyModel";

const props = defineProps<{
  diagramCustomizationManagementModel: DiagramCustomizationManagementModel;
}>();
const diagramClassifyModel: DiagramClassifyModel = reactive(props.diagramCustomizationManagementModel.diagramClassifyModel);

const currentKey = ref<number | undefined>(undefined);

const handleCilckRow = () => {
  currentKey.value = 0;
};
const changeInput = (val: string) => {
  diagramClassifyModel.classifier.cnName = val;
};
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-classify-wrap {
  padding: 0 16px 16px 16px;
  height: 100%;
  overflow: auto;
  display: flex;
  .el-input.is-disabled .el-input__wrapper {
    box-shadow: none;
  }

  .el-input__wrapper {
    box-shadow: none;
  }

  ._table-body {
    padding: 16px;
    flex: 1;
    overflow: auto;
    ._table-row:nth-of-type(even) {
      background: $nth-of-type-bg-color;
    }
  }
  ._table-body-icon {
    position: absolute;
    left: 4px;
    margin-top: 4px;
  }
  ._cell {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    box-sizing: border-box;
    font-size: 11px;
    line-height: 24px;
  }
  ._name-column {
    padding: 0 8px;
  }
  ._value-column {
    padding: 0;
    line-height: 24px;
    overflow-x: hidden;
    border-right: 1px solid #ddd;
  }

  ._current-row {
    ._cell {
      border-top-color: $theme-color;
      border-left-color: $theme-color;
    }

    ._name-column {
      padding: 0 8px;

      background: $theme-color;
      color: white;
    }
    ._value-column {
      box-sizing: border-box;
      line-height: 24px;
      border-right-color: $theme-color;
    }
  }
  ._current-row + ._table-row {
    line-height: 24px;
    ._cell {
      border-top-color: $theme-color;
    }
  }
  ._table-row:last-of-type {
    ._cell {
      border-bottom: 1px solid #ddd;
    }
  }
  ._table-row._current-row:last-of-type {
    ._cell {
      border-bottom: 1px solid $theme-color;
    }
  }
}
</style>
